<template>
  <div style="margin-top:60px;">
    <div style="display: flex;background-color: white;padding:10px 0;">
      <div style="width:25%;text-align: center" @click="byDefault">默认</div>
      <div style="width:25%;text-align: center" @click="byTime">上传时间<i v-show="query.timeAsc" class="el-icon-caret-top"></i><i
        v-show="query.timeDesc" class="el-icon-caret-bottom"></i></div>
      <div style="width:25%;text-align: center" @click="byReleaseTime">上映时间<i v-show="query.releaseAsc"
                                                                              class="el-icon-caret-top"></i><i
        v-show="query.releaseDesc" class="el-icon-caret-bottom"></i></div>
      <div style="width:25%;text-align: center" @click="byScore">评分<i v-show="query.scoreAsc" class="el-icon-caret-top"></i><i
        v-show="query.scoreDesc" class="el-icon-caret-bottom"></i></div>
    </div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="getByCategory"
    >
      <div style="display: flex;flex-wrap: wrap;background-color: white;">
        <div @click="toDetail(item.id)" v-for="item in list" style="border:1px dotted #dedede;width:50%;    box-sizing: border-box;
    -webkit-box-sizing: border-box;padding:30px 20px 20px 20px;
    -moz-box-sizing: border-box; display: flex;flex-direction: column;justify-content: center;align-items: center">
          <img style="width:90%;height:200px" :src="item.imgUrl" :onerror="errorimg"/>
          <div style="width:100%;overflow: hidden;
white-space: nowrap;text-align: center;margin-top: 20px;
text-overflow: ellipsis;">{{item.title}}
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
  import {getByCategory} from '@/api/movie'
  import {getCategoryList} from '@/api/category'
  import Pagination from '@/components/Pagination'
  import {getStore, removeStore, setStore} from '@/utils/storage'


  export default {
    name: 'Category',
    components: {Pagination},
    data() {
      return {
        checked: false,
        finished:false,
        loading: true,
        keyword: null,
        query: {
          timeDesc: true,
          timeAsc: false,
          scoreDesc: false,
          scoreAsc: false,
          releaseDesc: false,
          releaseAsc: false,
          sortField: "create_time",
          sortOrder: "desc",
          curPage: 1,
          isLow: 2, //只查大于7.5的
          isExpired: false,//只查云盘链接可用的
          title: null
        },
        total: 0,
        list: [],
        categoryList: [],
      }
    },
    computed: {},
    watch: {},
    filters: {
      scoreFilter(score) {
        if (score === null || score === '') {
          return "未知";
        } else {
          return score;
        }
      }
    },
    created() {
      let params = getStore('params');
      if (params) {
        this.query = JSON.parse(params);
      }
      // if (curPage != null) {
      //   this.query.curPage = Number(curPage);
      // }
      this.getCategoryList();
      this.getByCategory();
    },


    methods: {
      changeIslow(e) {
        if (e) {
          this.query.isLow = null;
        } else {
          this.query.isLow = 2;
        }
        this.resetPage();
        this.getByCategory();
      },
      byDefault() {
        this.query.sortField = null;
        this.query.sortOrder = null;
        this.clear();
        this.getByCategory();
      },
      byReleaseTime() {
        console.log("test",this.query.releaseAsc,this.query.releaseDesc)
        if(!this.query.releaseAsc && !this.query.releaseDesc){
          this.clear();
          this.query.releaseDesc = true;
          this.query.sortField = "real_release_time";
          this.query.sortOrder = "desc";
          this.getByParam();
          return;
        }
        if(this.query.releaseAsc){
          this.clear();
          this.query.releaseDesc = true;
          this.query.sortField = "real_release_time";
          this.query.sortOrder = "desc";
          this.getByParam();

          return;
        }
        if(this.query.releaseDesc){
          this.clear();
          this.query.releaseAsc = true;
          this.query.sortField = "real_release_time";
          this.query.sortOrder = "asc";
          this.getByParam();
          return;
        }
      },
      byTime() {
        console.log("test", this.query.timeAsc, this.query.timeDesc)
        if (!this.query.timeAsc && !this.query.timeDesc) {
          this.clear();
          this.query.timeDesc = true;
          this.query.sortField = "create_time";
          this.query.sortOrder = "desc";
          this.getByCategory();
          return;
        }
        if (this.query.timeAsc) {
          this.clear();
          this.query.timeDesc = true;
          this.query.sortField = "create_time";
          this.query.sortOrder = "desc";
          this.getByCategory();
          return;
        }
        if (this.query.timeDesc) {
          this.clear();
          this.query.timeAsc = true;
          this.query.sortField = "create_time";
          this.query.sortOrder = "asc";
          this.getByCategory();
          return;
        }
      },
      byScore() {
        if (!this.query.scoreAsc && !this.query.scoreDesc) {
          this.clear();
          this.query.scoreDesc = true;
          this.query.sortField = "score_douban";
          this.query.sortOrder = "desc";
          this.getByCategory();
          return;
        }
        if (this.query.scoreAsc) {
          this.clear();
          this.query.scoreDesc = true;
          this.query.sortField = "score_douban";
          this.query.sortOrder = "desc";
          this.getByCategory();
          return;
        }
        if (this.query.scoreDesc) {
          this.clear();
          this.query.scoreAsc = true;
          this.query.sortField = "score_douban";
          this.query.sortOrder = "asc";
          this.getByCategory();
          return;
        }
      },
      clear() {
        this.resetPage();
        this.query.scoreAsc = false;
        this.query.scoreDesc = false;
        this.query.timeDesc = false;
        this.query.timeAsc = false;
      },

      resetPage() {
        removeStore('params');
        this.query.curPage = 1;
      },

      getCategoryList() {
        getCategoryList().then(r1 => {
          let tmp = [{"id": null, "title": "全部"}];
          this.categoryList = tmp.concat(r1.data)
        }).catch(err => {
          console.log("失败")
        })
      },
      changeCategory(categoryId) {
        this.resetPage();
        this.categoryIndex = categoryId;
        this.getByCategory(categoryId);
      },
      getByCategory(categoryId) {
        console.log("分类id", categoryId)
        this.loading = true;
        this.query.categoryId = categoryId;
        // this.resetPage();
        // setStore('params', this.query);
        getByCategory(this.query).then(r1 => {
          this.query.curPage++;
          console.log("加载：", this.query.curPage)
          // console.log("records:", r1.data.records)
          this.list = this.list.concat(r1.data.records);
          // console.log("list:", this.list)
          this.loading = false;

          // 数据全部加载完成
          if (this.list.length >= r1.data.total) {
            this.finished = true;
          }
          this.total = r1.data.total;
        }).catch(err => {
          this.loading = false;
        })
      },

      toDetail(id) {
        this.$router.push({path: '/movie/detail/' + id})

      }
    }
  }
</script>

<style scoped>

  .empty-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 1200px;
    align-items: center;
    height: 300px;
  }

  .empty-img {
    width: 150px;
    height: 110px;
  }

  .empty-txt {
    font-size: 14px;
  }

  .content-wrap {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .content {
    width: 1200px;
    height: 100%;
    background-color: white;
    box-shadow: 2px 5px 6px #dedede;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
  }

  .item-wrap {
    width: 238px;
    border: 1px solid #f3f3f3;

  }

  .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    position: relative;
    height: 320px;
  }

  .item:hover {
    box-shadow: 6px 6px 10px #dedede;
  }

  .img {
    margin-top: 30px;
    width: 160px;
    height: 230px;
    border-radius: 10px;
  }

  .img:hover {
    margin-top: 10px;
    width: 180px;
    height: 250px;
  }

  /*.title:hover {*/
  /*  margin-bottom: 20px;*/
  /*  margin-top: 0;*/
  /*}*/

  .title {
    /*display: flex;*/
    /*justify-content: center;*/
    margin: 20px 0;
    font-size: 16px;
    font-weight: bold;
    /**超出省略*/
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    /*width: 180px;*/
  }

  .score {
    font-size: 16px;
    /*margin-bottom: 20px;*/
    position: absolute;
    right: 40px;
    top: 225px;
    background-color: #99CC33;
    color: white;
    width: 50px;
    border-radius: 10px;
    text-align: center;
    height: 22px;
    line-height: 22px;
  }

  .page {
    width: 1168px;
    box-shadow: 6px 6px 10px #dedede;
    margin: 0 auto;
  }

  .category-wrap {
    background-color: white;
    width: 1200px;
    margin: 0 auto;

  }

  .category {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 20px;
    margin-left: 20px;
    /*justify-content: center;*/
  }


  .category-item {
    font-size: 14px;
    width: 65px;
    height: 35px;
    margin-bottom: 10px;
    /*background-color: yellow;*/
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: 1px dotted #d2d2d2;
    cursor: pointer;
  }

  .category-item:hover {
    background-color: black;
    color: white;
  }


  .query-wrap {
    background-color: white;
    width: 1200px;
    margin: 0 auto;
    border-bottom: 1px dotted #d2d2d2;
  }

  .query {
    display: flex;
    font-size: 14px;
    padding: 30px 40px;
  }

  .sort-tips {
    margin-right: 50px;
  }

  .byDefault {
    width: 50px;
    border-right: 1px dotted gray;
  }

  /*.hover{*/
  /*  text-align: center;*/
  /*}*/
  .hover:hover {
    cursor: pointer;
  }

  .byTime {
    margin-left: 20px;
    width: 90px;
    border-right: 1px dotted gray;
  }


  .byScore {
    margin-left: 20px;
    width: 65px;
    margin-right: 30px;
    border-right: 1px dotted gray;
  }
</style>
